<template>
    <div>
        <div>
            <van-nav-bar
                    title="商品详情"
                    left-text="返回"
                    left-arrow
                    @click-left="tzback()"
            />
        </div>
        <!--1.内容-->
        <div>
            <van-row gutter="20">
                <van-col span="24">
                    <van-swipe :autoplay="3000" lazy-render>
                        <van-swipe-item class="img">
                            <img :src="tickets.imgurl" />
                        </van-swipe-item>
                    </van-swipe>
                </van-col>
                <van-col span="24"><h2>{{tickets.title}}</h2></van-col>
                <van-col span="12"><label class="l1">原价：{{tickets.oldprice}}元</label></van-col>
                <van-col span="12"><label class="l2">平台价：{{tickets.price}}元</label></van-col>
                <van-col span="12"><label class="l1">库存：{{tickets.repertory}}</label></van-col>
                <van-col span="12"><label class="l1">运费：{{tickets.freight==0?'包邮':tickets.freight}}</label></van-col>
                <van-col span="12" v-show="type==1">
                    <label class="l1">浏览量：999+</label>
                </van-col>
                <van-col span="12" v-show="type==1">
                    <label class="l1" >购买量：999+</label>
                </van-col>
                <van-col span="24" v-html="tickets.detail"></van-col>
            </van-row>

        </div>
        <!--2.底部-->
        <div class="dv1">
            <van-action-bar>
                <van-action-bar-icon icon="chat-o" text="客服" @click="tzchat()" color="#ee0a24" />
                <van-action-bar-icon icon="cart-o" text="购物车" to="/ticketcart"/>
                <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
                <van-action-bar-button type="warning" text="加入购物车" @click="add()"/>
                <van-action-bar-button type="danger" text="立即购买" />
            </van-action-bar>

        </div>
    </div>
</template>

<script>
    import { Toast } from 'vant';
    export default {
        name: "TicketDetail",
        data(){
            return{
                tickets:{

                },
                type:1
            }
        },
        mounted() {
            //页面加载，就会执行
            //axios请求后端接口 查询详情
            //获取商品id和type(1商品 2秒杀商品),获取用户id（VueX）
            var id=this.$route.query.gid;
            this.type=this.$route.query.type;
            var url="/api/tickets/detail.do";

            this.axios.get(url+"?id="+id).then(res=>{
                if(res.data.code==200){
                    //成功
                    this.tickets=res.data.data;
                }else{
                    //失败
                    Toast('亲，网络异常！');
                }

            })
        },
        methods:{
            tzback(){
                history.back();
            }, tzchat(){
                this.$router.push("/ticketchat");
            },
            add(){
                //请求接口 实现加入购物车
                var obj={
                    uid:this.$store.state.user.id,
                    gid:this.tickets.id,
                    price:this.tickets.price
                }

                this.axios.post("/api/cart/save.do",obj).then(res=>{
                    if(res.data.code==200){
                        //成功  跳转
                        this.$router.push("/ticketcart");
                    }else {
                        Toast("亲。加入购物车失败！");
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .l1{
        font-size: 1rem;
    }
    .l2{
        font-size: 1rem;
        color: red;
    }
    .img{
        width: 80%;
        height: 25rem;
    }
</style>v
